
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #3895e8;
        }
        .warp{
            box-sizing: border-box;
            height: 100vh;
            background: url(/examproject/imgages/demo2.png) no-repeat center;
            background-size: auto 100vh;
            position: relative;
        }
        .find_password{
            background-color: #ffffff;
            width: 460px;
            border-radius: 5px;
            box-shadow: 0 0 30px rgb(0 0 0 / 10%);
            padding: 30px 0;
            left: 50%;
            margin-left: -230px;
            position: fixed;
            top: 17%;
        }
        .find_password h4{
            font-size: 18px;
            color: #42a5f5;
            text-align: center;
            width: 400px;
            margin: 0 auto;
        }
        .find_password .right-now{
            width: 380px;
            text-align: right;
            margin: 20px auto 30px;
            font-size: 12px;
            color: #cacaca;
        }
        .find_password .right-now a{
            color: #42a5f5;
        }
        .right-now a{
            text-decoration: none;
            color: #369;
            outline: medium none;
        }
        .form-data .p-input, .find_password .p-input {
            padding: 5px 0;
            height: 44px;
            box-sizing: border-box;
            border-bottom: 1px solid #e5e5e5;
            width: 340px;
            margin: 0 auto 16px;
            line-height: 14px;
            display: block;
        }
        .form-data label, .find_password label {
            font-size: 14px;
            position: absolute;
            display: inline-block;
            color: #cacaca;
            top: 22px;
        }
        .form-data input, .find_password input {
            outline: none;
            border: none;
            z-index: 5;
            position: absolute;
            top: 13px;
            width: 340px;
            background-color: transparent;
            font-size: 20px;
        }
        #pc_tel{
            height: 30px;
            margin-top:115px;
        }
        #pc_tel2{
            height: 30px;
            margin-top:175px;
            width: 240px;
        }

        #pc_tel3{
            height: 30px;
            margin-top: 235px;
        }
        #pc_tel4{
            height: 30px;
            margin-top: 295px;
        }

        #phone{
            margin-left:5px;
            font-size: 14px;
            margin-top: 115px;
        }
        #yzm{
            margin-left: 5px;
            font-size: 14px;
            margin-top: 175px;
        }
        #newpa{
            margin-left: 5px;
            font-size: 14px;
            margin-top: 235px;
        }
        #repa{
            margin-left: 5px;
            font-size: 14px;
            margin-top: 295px;
        }

        .lang-btn{
            width: 340px;
            font-size: 18px;
            font-weight: bold;
            color: white;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin: 30px auto;
            display: block;
            border-radius: 5px;
            cursor: pointer;
            background-color: #42a5f5;
            border-color: #42a5f5;
        }
    </style>
</head>
<body>
<div class="warp">
    <img src="../manage/images/fobj.jpg" width="100%" height="100%">
    <div class="find_password">
        <h4>注册</h4>
        <p class="right-now">已有账号,<a href="/examproject/nologin/Backgroundlogin.jsp">马上登入</a></p>
        <form action="/examproject/man/add" method="post">
        <p class="p-input pos">
            <label id="phone" style="display: block">用户名</label>
            <input type="text" id="pc_tel" name="name" onfocus="xiao(1)" onblur="qdao(1)" maxlength=11 required>
        </p>
        <p class="p-input pos2">
            <label id="yzm" style="display: block;width: 200px">手机号</label>
            <input type="text" id="pc_tel2" name="phone" onfocus="xiao(2)" onblur="qdao(2)" required/>
        </p>
        <p class="p-input pos3">
            <label id="newpa" style="display: block;width: 200px" >密码</label>
            <input type="password" id="pc_tel3" name="pass" onfocus="xiao(3)" onblur="qdao(3)" required/>
        </p>
        <p class="p-input pos4">
            <label id="repa" style="display: block;width: 200px">重复密码</label>
            <input type="password" id="pc_tel4" onfocus="xiao(4)" onblur="qdao(4)" required/>
        </p>
        <button class="lang-btn" onchange="yh()">注册</button>
        </form>
    </div>
</div>
</body>
<script>
    var msg =<%=request.getParameter("msg")%>;
    if(msg==true){
        alert("该用户已存在");
    }

    function xiao(x) {
        if(x==1){
            document.getElementById("phone").style.display="none"
        }else if(x==2){
            document.getElementById("yzm").style.display="none"
        }else if(x==3){
            document.getElementById("newpa").style.display="none"
        }else if(x==4){
            document.getElementById("repa").style.display="none"
        }

    }
    function qdao(h) {
        if(h==1){
            var val=document.getElementById("pc_tel").value;
            if(val==''){
                document.getElementById("phone").style.display="block"
            }

        }else if(h==2){
            var va=document.getElementById("pc_tel2").value;
            if(va==''){
                document.getElementById("yzm").style.display="block"
            }
        }else if(h==3){
            var va=document.getElementById("pc_tel3").value;
            if(va==''){
                document.getElementById("newpa").style.display="block"
            }
        }else if(h==4){
            var va2=document.getElementById("pc_tel3").value;
            var va=document.getElementById("pc_tel4").value;
            if(va==''){
                document.getElementById("repa").style.display="block"
            }
            if(va!=va2){
                alert("密码不一致")
            }
        }
    }
</script>
</html>
